export class VideoController {
  private width: number
  private height: number
  private container: HTMLElement
  public overlay: HTMLCanvasElement | null = null
  public videoElement: HTMLVideoElement
  constructor(width: number, height: number, container: HTMLElement = document.body) {
    this.videoElement = document.createElement('video')
    this.width = width
    this.height = height
    this.container = container
  }
  // 创建video
  createVideo() {
    this.videoElement.width = this.width
    this.videoElement.height = this.height
    this.videoElement.autoplay = true
    this.videoElement.muted = true
    this.videoElement.controls = false
    // this.videoElement.style.display = 'none'
    // this.videoElement.style.position = 'absolute'
    // this.videoElement.style.top = '0px'
    // this.videoElement.style.left = '0px'
    this.videoElement.setAttribute('playsinline', 'playsinline')
    this.container.append(this.videoElement)
    this.createOverlay()
    // this.container.style.position = 'relative'
  }
  // 创建mask
  createOverlay() {
    this.overlay = document.createElement('canvas')
    this.overlay.width = this.width
    this.overlay.height = this.height
    this.overlay.style.position = 'absolute'
    this.overlay.style.top = '0px'
    this.overlay.style.left = '0px'
    this.container.append(this.overlay)
  }
  // 设置video路径
  setSrc(url: string) {
    this.videoElement.src = url
  }
  // 开启摄像头
  async getCamera() {
    const mediaDevices = navigator.mediaDevices
    console.log('开始获取摄像头数据')
    const stream = await mediaDevices
      .getUserMedia({
        audio: false,
        video: {
          width: {
            // min: 1280,
            ideal: this.width
            // max: 2560,
          },
          height: {
            // min: 720,
            ideal: this.height
            // max: 1440
          },
          facingMode: 'user' //优先使用前置摄像头
        }
      })
      .catch((err) => {
        console.log('摄像头数据获取失败', err)
      })

    if (stream) {
      console.log('获取到摄像头数据', stream.getTracks())
      this.videoElement.srcObject = stream
      this.videoElement.play()
      // this.videoElement.style.transform = 'rotateY(180deg)'
      // this.videoElement.style.opacity = '0'
      this.videoElement.onloadedmetadata = () => {
        // const cameraSize = {
        //     'width': this.videoElement.offsetWidth,
        //     'height': this.videoElement.offsetHeight
        // }
        // if (window.innerWidth < window.innerHeight) {
        //     // 竖屏
        //     if (cameraSize.height < window.innerHeight) {
        //         console.log(document.body.offsetHeight)
        //         this.videoElement.setAttribute('height', document.body.offsetHeight.toString() + 'px');
        //     }
        // }
        // else {
        //     // 横屏
        //     if (cameraSize.width < window.innerWidth) {
        //         this.videoElement.setAttribute('width', document.body.offsetWidth.toString() + 'px');
        //     }
        // }
      }
    }
  }
}
